<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

    <!-- 只有setTimeout -->
    <script>
        /* console.log('script start');

        setTimeout(function () {
            console.log('setTimeout');
        }, 0);

        
        console.log('script end'); */

    </script>

    <!-- 只有Promise -->

    <script>
       /*  console.log('script start');

        // 方式一
        new Promise(function (resolve) {
            console.log('马上执行哦');
            resolve()
        }).then(function () {
            console.log('执行then函数啦')
        });
        
        // 方式二
        Promise.resolve().then(function () {
            console.log('promise1');
        }).then(function () {
            console.log('promise2');
        });
        
        console.log('script end'); */
    </script>

    <!-- 宏任务和微任务 -->
    <script>
       /*  setTimeout(function () {
            console.log('1')
        }, 1000);

        new Promise(function (resolve) {
            resolve()
            console.log('2');
        }).then(function () {
            console.log('3')
        });

        console.log('4'); */
    </script>

    <!-- 来看看区别 -->

    <script>
        /* var time = new Date().getTime()
        console.log("a");
        setTimeout(function () {
            console.log(new Date().getTime() - time);
            console.log("b");
        }, 0)
        new Promise(function (res, rej) {
            res();
        }).then(function () {
            console.log(new Date().getTime() - time);
            console.log("c");
        })
        console.log("d"); */
    </script> 

</body>

</html>
